<script setup>
import { ref, computed } from 'vue';

const timeRangeIndex = ref(0);
const timeRangeOptions = ["近一个月", "近三个月", "近一年"];

const allHolidayData = ref([
  {
    year: 2024,
    startTime: "2024-11-16 00:00:00",
    endTime: "2024-11-16 00:00:00",
    duration: 26,
    isApproved: true,
  },
  {
    year: 2024,
    startTime: "2024-11-16 00:00:00",
    endTime: "2024-11-16 00:00:00",
    duration: 26,
    isApproved: true,
  },
  {
    year: 2024,
    startTime: "2024-11-16 00:00:00",
    endTime: "2024-11-16 00:00:00",
    duration: 26,
    isApproved: false,
  },
]);

const tabIndex = ref(0); // 0: 审批通过；1: 审批不通过

const filteredHolidayData = computed(() => {
  return allHolidayData.value.filter(item => {
    return tabIndex.value === 0 ? item.isApproved : !item.isApproved;
  });
});

// 审批通过数量
const passedCount = computed(() => {
  return allHolidayData.value.filter(item => item.isApproved).length;
});

// 审批不通过数量
const rejectedCount = computed(() => {
  return allHolidayData.value.filter(item => !item.isApproved).length;
});

</script>

<template>
  <view class="holiday-page">
<!--导航栏-->
    <view class="tab-container">

      <view
          class="tab-item"
          :class="{ 'active': tabIndex === 0 }"
          @click="tabIndex = 0"
      >
        审批通过 ({{ passedCount }})
      </view>

      <view
          class="tab-item"
          :class="{ 'active': tabIndex === 1 }"
          @click="tabIndex = 1"
      >
        审批不通过 ({{ rejectedCount }})
      </view>

    </view>

    <view class="holiday-list">
<!--数据表-->
      <view
          class="holiday-item"
          v-for="(item, index) in filteredHolidayData"
          :key="index"
      >

        <view class="item-header">

          <image src="/static/home-icon.png" class="item-icon" />
          <image src="/static/image/bz@2x.png" class="bz-icon" />
          <text class="item-title">{{ item.year }}年春节放假</text>

        </view>

        <view class="item-info">

          <text>假期开始时间：{{ item.startTime }}</text>
          <text>假期结束时间：{{ item.endTime }}</text>
          <text>时长：{{ item.duration }}天</text>

        </view>

      </view>

    </view>

  </view>
</template>
<style scoped>
.holiday-page {
  padding: 16px;
  background-color: #f5f7fa;
  min-height: 100vh;
}
.tab-container {
  display: flex;
  border-bottom: 2px solid #409eff;
  margin-bottom: 16px;
}
.tab-item {
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
}
.tab-item.active {
  color: #409eff;
  font-weight: bold;
  border-bottom: 2px solid #409eff;
}
.holiday-list {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.holiday-item {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: rgba(255, 255, 255, 0.85);
  position: relative;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.item-header {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  gap: 8px;
}
.item-icon {
  width: 24px;
  height: 24px;
}
.bz-icon {
  width: 22px;
  height: 22px;
}
.item-title {
  font-weight: bold;
  font-size: 16px;
  color: #333;
}
.item-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #666;
  font-size: 14px;
}
</style>